<template>
  <a-card :bordered="false">
    <a-drawer title="字典列表" :width="screenWidth" @close="onClose" :visible="visible">
      <div class="search-group" style="padding: 0">
        <div class="input-wrap" style="width: 200px">
          <div class="label" style="min-width: 40px">名称:</div>
          <div class="input-item">
            <a-input
              :maxLength="30"
              placeholder="请输入名称"
              style="width: 150px"
              v-model="queryParam.itemText"
            ></a-input>
          </div>
        </div>
        <div class="input-wrap" style="width: 200px">
          <div class="label" style="min-width: 40px">状态:</div>
          <div class="input-item">
            <a-select placeholder="请选择" style="width: 150px" v-model="queryParam.status">
              <a-select-option value="0">禁用</a-select-option>
              <a-select-option value="1">正常</a-select-option>
            </a-select>
          </div>
        </div>

        <div class="btn-wrap flex align-center">
          <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
          <a-button class="BtnStyle" type="primary" @click="handleAdd">新增</a-button>
        </div>
      </div>
      <div class="table-wrap">
        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :loading="loading"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <span slot="action" slot-scope="text, record">
            <a class="operation dropdown-color" @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a class="operation dropdown-color">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
    </a-drawer>
    <dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal>
  </a-card>
</template>

<script>
import DictItemModal from './modules/DictItemModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'DictItemList',
  mixins: [JeecgListMixin],
  components: { DictItemModal },
  data () {
    return {
      url: {
        list: '/sys/dict_item/page',
        delete: '/sys/dict_item/delete',
        deleteBatch: '/sys/dict_item/deleteBatch',
      },
      dictId: "",
      visible: false,
      screenWidth: 700,
      queryParam: {
        dictId: '',
        itemText: '',
        status: '1',
      },
      columns: [
        {
          title: '名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'itemText',
        },
        {
          title: '数据值',
          align: 'center',
          ellipsis: true,
          dataIndex: 'itemValue',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  methods: {
    edit (record) {
      if (record && record.id) {
        this.dictId = record.id
        this.queryParam.dictId = record.id
      }
      this.loadData()
      this.visible = true
    },
    searchReset () {
      if (this.queryParam.dictId) {
        let id = this.queryParam.dictId
        this.queryParam = {}
        this.queryParam.dictId = id
      }
      this.resetTime = true
      this.loadData(1)
    },
    // 添加字典数据
    handleAdd () {
      this.$refs.modalForm.add(this.dictId)
    },
    onClose () {
      this.visible = false
      this.dataSource = []
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-card-body {
  padding: 0 !important;
}
.table-wrap {
  margin-top: 10px;
}
</style>
